<script setup lang="ts">
import Beehive from "@/modal/Beehive";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import type {Reactive} from "vue";

interface iBeehive {
  beehive: Reactive<Beehive>;
}

const props = defineProps<iBeehive>()
const beehive = props.beehive

const growUp = () => {
  emits('emitGrowUp', beehive)
}
const emits = defineEmits(['emitGrowUp'])
</script>

<template>
  <div class="base-type col-12 h-100">
    <div v-for="steps in beehive.baseRipen"
         @click="growUp"
         class="base-item">
      <div class="item-step">
        <icon-font
          v-if="!beehive.awardStep(steps)"
          :icon-type="IconType.BASE"
          :color="steps <= beehive.currentStep?IconColor.BEEHIVE:IconColor.FLOWER_PASSIVE"
          font-size="xx-large">
        </icon-font>
      </div>
      <div class="award-content">
        <icon-font
          v-if="beehive.awardStep(steps)"
          :icon-type="IconType.BONUS"
          :color="steps > beehive.currentStep?IconColor.FLOWER_PASSIVE:IconColor.BEEHIVE"
          :is-desc="true"
          font-size="x-large">
          <template #description>
            <div class="award-desc">
              <icon-font :icon-type="IconType.FRUIT"
                         :color="IconColor.IRRIGATE"
                         :is-desc="true"
                         font-size="x-large">
              </icon-font>
            </div>
            <div class="award-desc" v-if="steps === 4">
              <icon-font :icon-type="IconType.FRUIT"
                         :color="IconColor.IRRIGATE"
                         font-size="x-large">
              </icon-font>
            </div>
          </template>
        </icon-font>
      </div>
    </div>
  </div>
</template>

<style scoped>
.base-type {
  display: flex;
  flex-direction: column-reverse;
}

.base-item {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}


.item-step {
  position: relative;
  top: -13px;
  left: -4px;
}

.award-content {
  position: absolute;
  left: -0.5%;
  top: calc(-50% + 3px);
}

.award-desc {
  width: 24px;
}
</style>